<template>
	<view class="complaint-pages">
		<view class="form-block">
			<view class="title">投诉举报</view>
			<view class="form-item">
				<view class="name-item">
					<view class="name">是否匿名</view>
				</view>
				<view class="form-crl" v-if="form.isAnonymous==1">是</view>
				<view class="form-crl" v-else>否</view>
			</view>
			<view class="form-item">
				<view class="name-item">
					<view class="name">门牌号</view>
				</view>
				<input placeholder="请输入举报小区门牌号" v-model="form.house" maxlength="30" class="form-crl" disabled />
			</view>
			<view class="form-item">
				<view class="name-item">
					<view class="name">描述</view>
				</view>
				<textarea placeholder="请简述您要投诉举报的内容..." v-model="form.sketch" class="form-crl1" maxlength="100"
					disabled />
			</view>
			<view class="form-item1" v-if="form.imageList.length>0">
				<view class="name-item">
					<view class="must"></view>
					<view class="name">上传图片</view>
				</view>
				<view class="upload-item">
					<view v-for="(item,index) in form.imageList" class="image-item">
						<view>
							<image mode="aspectFit" :src="backendStorage+item" @click="previewImg(item)" class="img">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="form-item1" style="border-top: 1px solid #f7f7f7;padding-top: 30rpx;"
				v-if="form.ireplyContent">
				<view class="name-item">
					<view class="name">回复</view>
				</view>
				<view class="form-crl">{{form.replyContent}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/api/file.js';
	import {
		getReportDetailApi
	} from '@/api/complaint.js'
	import {
		validate
	} from '@/util/validate.js';
	export default {
		data() {
			return {
				form: {
					isAnonymous: 1,
					house: '',
					sketch: '',
					imageList: [],
					replyContent: '',
					isReply: 0
				},
			}
		},
		methods: {
			previewImg(url) {
				uni.previewImage({
					urls: [this.cloudStorage + url],
				});
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getReportDetailApi({
					id: this.id
				}).then((res) => {
					this.form = res
				})
			},
		},
		onLoad(e) {
			this.id = e.id
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.complaint-pages {
		padding: 30rpx;

		.tips-item {
			background: $error-background;
			padding: 30rpx;
			display: flex;
			align-items: center;
			color: $theme-color;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.iconfont {
				margin-right: 10rpx;
			}

			.tips {
				font-size: 30rpx;
			}
		}

		.form-block {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}


			.name-item {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.must {
					color: $theme-color;
				}

				.name {
					font-size: 30rpx;
				}
			}

			.form-item {
				margin-bottom: 30rpx;
				border-bottom: 1px solid #f7f7f7;
				padding-bottom: 10rpx;

				.form-crl {
					font-size: 30rpx;
				}

				.form-crl1 {
					font-size: 30rpx;
					height: 160rpx;
				}

				.placeholder {
					color: grey;
					font-size: 15px;
				}
			}

			.form-item1 {
				.upload-item {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					margin-top: 40rpx;

					.image-item {
						margin-bottom: 20rpx;
						margin-right: 20rpx;
						display: flex;
						flex-direction: row;

						.img {
							width: 190rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}

						.iconfont {
							.delete {
								width: 18px;
								height: 18px;
								position: absolute;
								margin-left: -30rpx;
							}
						}
					}

					.image-item:nth-child(3n) {
						margin-right: 0;
					}

					.delete-item {
						width: 100%;
						display: flex;
						justify-content: flex-end;

						.delete {
							width: 20px;
							height: 20px;
							position: absolute;
						}
					}

					.upload-content {
						position: relative;
						background: #f8f8f8;
						border-radius: 10px;
						width: 200rpx;
						height: 200rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 20rpx;

						.upload-img {
							width: 60rpx;
							height: 60rpx;
						}
					}
				}
			}
		}

		.btn {
			border-radius: 20rpx;
		}
	}
</style>